<template>
    <div class="scrolling-navbar-container">
      <div class="navbar" :class="isScrolled ? 'isScrolled' : 'scrolled' ">
        <slot name="nav-text" :isScrolled="isScrolled"></slot>
      </div>
      <div ref="content" class="content-placeholder">
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isScrolled: false,
      };
    },
    mounted() {
      this.$refs.content.addEventListener('scroll', this.handleScroll);
      
    },
    beforeDestroy() {
      this.$refs.content.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
      handleScroll() {
        this.isScrolled = this.$refs.content.scrollTop > 0;
        
        if(this.$refs.content.scrollTop==0){
            this.isScrolled=false;
        }
       
      },
    },
  };
  </script>
  
  <style scoped>
  .scrolling-navbar-container {
    position: relative;
  }
  
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s;
    
    color: #fff;
    z-index: 1000;
  }
  
  .navbar.scrolled {
    background-color: #569be9;
    color: #000;
  }
  .navbar.isScrolled {
    background-color: #569be9;
    color: #000;
  }
  
  .content-placeholder {
    overflow-y: auto;
    /* Ensure there's enough height for scrolling to trigger */
    height: calc(100vh - 60px);
   
  }
  .navbar {
  /* ...现有样式... */
 
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar {
  /* 初始状态透明 */
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* ...其他样式... */
}

/* 修正isScrolled类的颜色，确保与scrolled有所区别，这里用绿色代替白色 */
.navbar.isScrolled {
    border-top:0.5px solid grey ;
    background-color: #569be9;
  font-size: large;
  font-weight: 600;
  color: #000;
}

/* 保留原有scrolled类的定义，如果isScrolled是为了其他逻辑，确保它们有各自的样式 */
.navbar.scrolled {
    background-color: rgba(0, 0, 0, 0);
    font-size: large;
    font-weight: 600;
  color: #fff;
  
}


  </style>
  